<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		
		<view class="info1">
			<span>教育经历（必填）</span>
			<view class="info">
				<view class="box">
					<span>学历</span>
					<view class="" @click="getEducation">
						<span :style="education?'color:#001A18':''">{{education?education:'请选择学历'}}</span>
						<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
					</view>
					<uPicker :show="educationShow" :columns="educationList"
					@confirm="educationConfirm" @cancel="educationPickerClose"
					:defaultIndex="[2]">
					</uPicker>
				</view>
				<view class="box">
					<span>学校</span>
					<view class="" @click="toChooseSchool">
						<span :style="school?'color:#001A18':''">{{school?school:'请选择学校'}}</span>
						<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
					</view>
					
					
				</view>
				<view class="box">
					<span>毕业年份</span>
					<view class="" @click="getGraduateDate">
						<span :style="graduateDate?'color:#001A18':''">{{graduateDate?graduateDate:'请选择毕业年份'}}</span>
						<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
					</view>
					<uDatetimePicker
							:show="graduateDateShow"
							v-model="now"
							mode="year-month"
							@confirm="graduateDateConfirm"
							@cancel="graduateDateClose"
							:minDate="252432000000"
					></uDatetimePicker>
				</view>
				<view class="box">
					<span>专业</span>
					<input type="text" v-model="major" placeholder="请输入专业名称" 
					placeholder-style="color: #99A3A3;font-size: 28rpx;" class="input">
				</view>
			</view>
		</view>
	
		<button class="button" @click="toFinishResume3">下一步</button>
	
	</view>
</template>

<script>
	import uPicker from '@/subpageA/uview-ui/components/u-picker/u-picker.vue'
	import uDatetimePicker from '@/subpageA/uview-ui/components/u-datetime-picker/u-datetime-picker.vue'
	
	export default {
		data() {
			return {
				
				education:'',
				educationShow:false,	
				educationList:[['博士','硕士','本科','专科','高中及以下']],
				
				school:'',
				
				graduateDate:'',
				graduateDateShow:false,
				now:Number(new Date()),
				
				major:'',
			};
		},
		components:{
			uPicker,
			uDatetimePicker
		},
		onLoad() {
			this.$bus.$on('chooseSchool',school=>{
				this.school=school
			})
			
			let resumeInfo=uni.getStorageSync('resumeInfo')
			this.education=resumeInfo.edu
			this.school=resumeInfo.school
			this.graduateDate=resumeInfo.gradYear
			this.major=resumeInfo.major
			
		},
		methods:{
			graduateDateConfirm(date){
				//console.log(this.formatDate(date.value));
				this.graduateDate=this.formatDate(date.value).toString()
				this.graduateDateShow=false;
			},
			graduateDatePickerClose(){
				this.graduateDateShow=false
			},
			formatDate(time){
			    var date = new Date(time);
			 
			    var year = date.getFullYear(),
			        month = date.getMonth() + 1,//月份是从0开始的
			        day = date.getDate();
			    var newTime = year + '-' +
			                month 
			    return newTime;         
			},
			getGraduateDate(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				let that=this
				my.datePicker({
					format:'yyyy-MM',
				  currentDate: this.formatDate(this.now),
				  startDate: '1900-1',
				  endDate: '2030-1',
				  success: (res) => {
					that.graduateDate=res.date
				  },
				});
				// #endif
				
				//#ifndef MP-ALIPAY
				this.graduateDateShow=true;
				//#endif
			},
			
			educationConfirm(val){
				this.education=val.values[0][val.indexs[0]];
				this.educationShow=false;
			},
			educationPickerClose(){
				this.educationShow=false;
			},
			getEducation(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				let that=this;
				my.optionsSelect({
				  title: "请选择您的学历",
				  optionsOne: this.educationList[0],
				  selectedOneIndex: 2,
				  success(res) {
					that.education=res.selectedOneOption
				  }
				});
				//#endif
				//#ifndef MP-ALIPAY
				this.educationShow=true;
				//#endif
			},
			graduateDateClose(){
				this.graduateDateShow=false
			},
			//下一步
			toFinishResume3(){
				if(!this.education||!this.school||!this.graduateDate||!this.major){
					uni.showToast({
						title:'请完善必填项',
						duration:1500,
						icon:'none'
					})
					//return
				}
				
				let resumeInfo=uni.getStorageSync('resumeInfo')
				let tempObj={
					edu:this.education,
					school:this.education,
					gradYear:this.graduateDate,
					major:this.major
				}
				Object.assign(resumeInfo,tempObj)
				// uni.setStorageSync('edu',this.education)
				// uni.setStorageSync('school',this.school)
				// uni.setStorageSync('gradYear',this.graduateDate)
				// uni.setStorageSync('major',this.major)
				
				uni.setStorageSync('resumeInfo',resumeInfo)
				uni.navigateTo({
					url:'./finishResume3'
				})
			},
			toChooseSchool(){
				uni.navigateTo({
					url:'./chooseSchool'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		background-color: #F3F7F8;
		
		.info1{
			width: 686rpx;
			margin: 32rpx;
			
			>span{
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			.info{
				width: 100%;
				margin-top: 32rpx;
				padding: 20rpx 0;
				border-radius: 8px;
				background-color: #FFFFFF;
				
				.box{
					display: flex;
					
					align-items: center;
					margin-left: 32rpx;
					height: 72rpx;
					>span{
						width: 120rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #001A18;
					}
					view span{
						display: inline-block;
						width: 450rpx;
						margin-left: 32rpx;
						//#ifdef MP-ALIPAY
						margin-left: 48rpx;
						//#endif
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #99A3A3;
					}
					input{
						display: inline-block;
						width: 360rpx;
						margin: 32rpx;
					}
					view image{
						width: 16rpx;
						height: 30rpx;
					}
					.public{
						width: 100rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 10px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						
					}
				}
			}
		}
	
		.button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #08C8BD;
			border-radius: 8px 8px 8px 8px;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	
	}
</style>
